<script setup lang="ts">
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { UserControllerService } from "../../../xiongoj_backendapi";
const router = useRouter();
const store = useStore();
const clickTo = (pageName: string) => {
  // 根据页面名称执行导航逻辑
  if (pageName === "person") {
    router.push("/person");
  } else if (pageName === "logOut") {
    UserControllerService.userLogoutUsingPost();
    location.reload();
  }
  // 可以添加更多的页面调整逻辑
};
const userLogIn = () => {
  // 模拟登录逻辑
  router.push("/user/login");
};
</script>

<template>
  <div>
    <a-col flex="100px">
      <div class="nameForLogin">
        <a-space size="large">
          <a-dropdown v-if="store.state.user.loginUser.userName !== '未登录'">
            <a-button style="font-size: larger; margin-right: 20px">
              {{ store.state.user?.loginUser?.userName ?? "未登录" }}
            </a-button>
            <template #content>
              <a-doption @click="clickTo('person')">个人中心</a-doption>
              <a-doption @click="clickTo('logOut')">退出登录</a-doption>
            </template>
          </a-dropdown>
          <a-button
            v-else
            @click="userLogIn"
            style="font-size: larger; margin-right: 20px"
            >登录</a-button
          >
        </a-space>
      </div>
    </a-col>
  </div>
</template>

<style scoped></style>
